<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

    <style type="text/css">
        p {
            text-align: right;
        }

        #totalPrice {
            color: red;
            font-size: 30px;
        }

        h2 {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>

<body>
<h1>我的京东_我的购物车</h1>
<p>
    <a href="${pageContext.request.contextPath }/findProdByPage?page=1&size=5">继续购物</a>
     <a href="${pageContext.request.contextPath }/cart/clearCart">清空购物车</a>

    <a href="${pageContext.request.contextPath }/order/onlinePay">
     <img src="${pageContext.request.contextPath }/image/gotoorder.bmp"/></a>
</p>

<hr/>

<c:if test="${empty requestScope.map }">
    <p style="text-align:center;">
        <img src="${pageContext.request.contextPath }/image/cart.jpg"></p>
    <h2><a href="${pageContext.request.contextPath }/findProdByPage?page=1&size=5">购物车控控如也,请取挑点东西吧~~~~~~~~</a></h2>
</c:if>

<c:if test="${!empty requestScope.map }">
    <table id="t1" border="1" cellspacing="0" cellpadding="10" width="100%">
        <tr>
            <th>缩略图</th>
            <th>商品名称</th>
            <th>商品种类</th>
            <th>商品单价</th>
            <th>购买数量</th>
            <th>库存数量</th>
            <th>总价</th>
            <th>删除</th>
        </tr>
        <c:forEach items="${map }" var="entry">

            <tr>
                <td><img src="${applicationScope.pic_url}${entry.key.imgurls}"></td>
                <td><c:out value="${entry.key.name}"></c:out></td>
                <td><c:out value="${entry.key.type}"></c:out></td>
                <td><c:out value="${entry.key.price}"></c:out></td>
                <td>
                    <input type="number" id="buynum" value="${entry.value}" size="5"
                           onchange="changeNum(this,${entry.key.id})"/>
                </td>
                <td>
                    <c:if test="${entry.key.pnum >= entry.value}">
                        <span id="huo">有货</span>
                    </c:if>
                    <c:if test="${entry.key.pnum < entry.value}">
                        <span id="huo">库存不足</span>
                    </c:if>
                </td>
                <td class="preTotal">
                    <fmt:formatNumber value="${entry.key.price * entry.value}" pattern="#.##"
                                      minFractionDigits="2"> </fmt:formatNumber>
                </td>

                <td> <button onclick="delProd(${entry.key.id})">删除</button> </td>
            </tr>

        </c:forEach>

    </table>

    <p><span id="totalPrice"></span></p>

</c:if>


</body>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    //1 格式调整
    //2 修改数量
    //3 单个商品总价,所有商品总价都变化
    //4 库存状态
    //5 删除商品
    //6 清空购物车
    //7 继续购物
    //8 空空如也

   function delProd( prodid) {
        $.get("${pageContext.request.contextPath }/cart/delCartById",
            "prodid=" + prodid, function (result) {
            if (result.code == 200) {
                location.reload();
            } else {
                alert("删除失败!");
            }
        },"json");
    }

    total();

   function changeNum(obj,prodid) {
       //1 ajax请求
       //2 有货  或  无货
       //3 修改单个商品的总价
       //4 修改所有商品的总价

       //获取修改以后的数量
       var num = $(obj).val();

       $.post("${pageContext.request.contextPath}/cart/chageCartNum",{"prodid":prodid,"num":num},
        function(result){
           if(result.code == 200){
                location.reload();
           }else{
               alert("修改失败");
           }
        },"json"
       );

   }

    function total(){
        //获取所有显示 单个商品的总价 ,
        var tds = document.getElementsByClassName("preTotal");

        //累加
        var sum = 0;
        for(var i = 0;i<tds.length;i++){
            //alert( tds[i].innerHTML );
            var price = parseFloat(tds[i].innerHTML);
            sum += price;
        }

        //alert(sum);
        var span = document.getElementById("totalPrice");
        span.innerHTML = "¥"+sum;
    }
</script>
</html>
